<template>
  <div class="summary-main">
    <div class="summary-container">
      <div class="summary" ref="summaryRef">
        <div class="currency" v-for="item in currencyData.balances" :key="item">
          <div class="flex">
            <img
              :src="getFlagUrl(item.currency)"
              alt="flag"
              class="flag-icon"
            />
            <span>
              {{ item.currency }}
            </span>
          </div>
          <div class="item">{{ item.balance }}</div>
          <div class="rate">
            1 {{ item.currency }} = {{ item?.exchangeRate || 1 }} CNY
          </div>
        </div>
      </div>
    </div>
    <div class="total">
      <div class="money">
        <span class="text-[#999]">汇总金额: </span
        ><span class="num">{{ currencyData.total }}</span>
        <span class="text-[12px]">CNY</span>
      </div>
      <div class="controls">
        <el-button circle size="small" @click="handleSetting"
          ><el-icon><Setting /></el-icon>
        </el-button>
        <el-button circle size="small" @click="scrollLeft"
          ><el-icon><ArrowLeft /></el-icon
        ></el-button>
        <el-button circle size="small" @click="scrollRight"
          ><el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
    </div>
  </div>
  <SettingCurrency
    v-model="setVisible"
    title="币种设置"
    :data="setData"
    :options="currencyOpt"
    @refresh="refresh"
    @close="setData = null"
  />
</template>

<script setup>
import { getCapitalFlowStatistics, currencyList } from "../../api";
import SettingCurrency from "./settingCurrency/index.vue";
import { getFlagUrl } from "@/utils/index.js";
// 引用 summary 容器
const summaryRef = ref(null);
const currencyData = ref({});
const getStatistics = async () => {
  const { data } = await getCapitalFlowStatistics();
  currencyData.value = data || {};
};
const currencyOpt = ref([]);
const getCurrencyList = async () => {
  const { data } = await currencyList();
  currencyOpt.value = data || [];
};
getCurrencyList();
getStatistics();
const setVisible = ref(false);
const setData = ref([]);
const handleSetting = () => {
  setData.value = currencyData.value?.balances?.map((it) => it.currency);
  setVisible.value = true;
};
const refresh = () => {
  getStatistics();
};
// 滚动到左边
const scrollLeft = () => {
  if (summaryRef.value) {
    summaryRef.value.scrollBy({ left: -440, behavior: "smooth" });
  }
};

// 滚动到右边
const scrollRight = () => {
  if (summaryRef.value) {
    summaryRef.value.scrollBy({ left: 440, behavior: "smooth" });
  }
};
</script>

<style scoped lang="scss">
.summary-main {
  padding: 10px;
}
.summary-container {
  overflow: hidden;
  width: 100%;
}

.summary {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}

.currency {
  padding: 3px 6px;
  margin-right: 10px;
  border: 1px solid var(--base-border-color);
  width: 210px;
  height: 70px;
  flex-shrink: 0;
  .item {
    font-weight: 700;
  }
  .rate {
    font-size: 12px;
    color: #666;
  }
}
.currency:last-child {
  margin-right: 0;
}
.total {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .money {
    font-size: 14px;
    .num {
      font-weight: 700;
      font-size: 16px;
      margin: 0 6px;
    }
  }
}

.controls {
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.controls span:hover {
  text-decoration: underline;
}
.flag-icon {
  width: 30px;
  height: 20px;
  margin-right: 10px;
}
</style>
